<template>
  <div class="weather-data">
    <Title title="气象数据" />
    <div class="title-con">
      <el-carousel :autoplay="true">
        <el-carousel-item v-for="(kit, indexk) in conList" :key="indexk">
          <div v-for="(itk, indexi) in kit" :key="indexi" class="weather-hang">
            <li v-if="itk.dataTypeName === '天气现象' || itk.dataTypeName === '风向描述'">
              {{ itk.dataItemName }}:{{ itk.enumListTypeList[itk.lastValue1] }}
            </li>
            <li v-else>
              {{ itk.dataItemName }}:{{
                itk.enumVal ? itk.enumVal : itk.lastValue1
              }}{{ itk.symbol && itk.symbol !== "无" ? itk.symbol : "" }}
            </li>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <img
      src="~@/assets/conservation-model/lin1.png"
      class="bottom-img"
      alt=""
    />
  </div>
</template>

<script>
import Title from "@/components/Title/index";

export default {
  components: {
    Title
  },
  props: {},
  data() {
    return {
      conList: []
    };
  },
  watch: {},
  created() {},
  methods: {
    traverList(arr, n) {
      // 拆分数组(轮播图格式)
      var list = [];
      for (let i = 0; i < arr.length; i += n) {
        list.push(arr.slice(i, i + n));
      }
      this.conList = list;
    }
  }
};
</script>

<style lang="scss" scoped>
.weather-data {
  height: 100%;
  width: 100%;
  ::v-deep .el-carousel {
    height: 100%;
  }
  ::v-deep .el-carousel__container {
    height: 100%;
  }
  position: relative;
  .bottom-img {
    position: absolute;
    bottom: 0;
    height: 1px;
    width: 100%;
  }
}
::v-deep .el-carousel__indicators--horizontal {
  display: none;
}
.weather-hang {
  width: calc(50% - 4px);
  height: calc(24% - 4px);
  margin: 2px;
  padding: 0 5px;
  float: left;
  box-shadow: 0px 0px 32px inset rgba(24, 140, 158, 0.8);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #fff;
  list-style: circle;
  font-size: 12px;
  white-space: nowrap;
}
</style>
